<template>
	<u-popup class="commit_popup" :show="show" @close="close" @open="open" mode="center">
		<view class="commit_box">
			<view class="head_box">
				评价本次服务
			</view>
			<view class="body_box">
				<view class="dis-flex flex-y-center mt_42 mb_30">
					<view class="com_box flex-box dis-flex flex-y-center flex-dir-column" v-for="item in commitRait"
						:key="item.acitive" :class="formData.active === item.acitive ? 'com_active' : ''"
						@click="activeHandle(item)">
						<u--image :showLoading="true" :src="item.url" width="66rpx" height="66rpx"></u--image>
						<text>{{ item.text }}</text>
					</view>
				</view>
				<u--textarea :height="130" class="textarea_style" border="none" v-model="formData.value1"
					placeholder="请输入意见建议"></u--textarea>

				<u-button class="custom-bnt_small mt_42 mb_25" text="提交" @click="submit"></u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			formData: {
				active: 3,
				value1: '',
			},
			commitRait: [
				{
					url: require('@/static/images/satisfied.png'),
					text: '3分',
					acitive: 3
				},
				{
					url: require('@/static/images/same.png'),
					text: '2分',
					acitive: 2
				},
				{
					url: require('@/static/images/dissatisfied.png'),
					text: '1分',
					acitive: 1
				}
			]
		};
	},
	methods: {
		open() {
			this.show = true
		},
		close() {
			this.show = false
		},
		activeHandle(e) {
			this.formData.active = e.acitive
		},
		submit() {
			this.$emit('submit', this.formData)
		}
	}
}
</script>

<style lang="scss" scoped>
.commit_box {
	width: 586rpx;
	height: 685rpx;
	background: #FFFFFF;
	border-radius: 15rpx;

	.head_box {
		width: 586rpx;
		height: 104rpx;
		background: #F3F3F3;
		border-radius: 15rpx;
		font-size: 36rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #000000;
		line-height: 104rpx;
		text-align: center;
	}

	.body_box {
		margin: 0 60rpx;
	}

	.com_active {
		text {
			color: #000000;
		}
	}
}

.u-popup__content {
	border-radius: 15rpx;
}

.custom-bnt_small {
	width: 465rpx;
	height: 60rpx;
	background: #6750F8;
	border-radius: 10rpx;
	color: #FFFFFF;
}
</style>
<style lang="scss">
.textarea_style {
	background-color: #EDEDED !important;

	.uni-textarea-placeholder {
		color: #808080 !important;
	}
}
</style>
